<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>calendar</title>
    <link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
</head>

<body>
<div id="section_container">
	<section data-role="section" id="page_week" class="active">
		<header>
	        <div class="titlebar">
	            <a data-toggle="back" href="#">
	                <i class="icon icon-arrowleft"></i>
	            </a>
	            <h1>日历</h1>
	        </div>
	    </header>
		<article id="main_article" data-role="article" class="active" style="background-color:white;">
			<div class="calendar" id="calender_select_container">
				<ul class="list noborder nobg">
					<li style="padding:10px 0;">
						<div class="justify arrowleft">
		                    <i class="icon icon-arrowleft"></i>
		                </div>
		                <div class="justify-content calendar-title">2016-2-15 周一</div>
		                <div class="justify arrowright">
		                    <i class="icon icon-arrowright"></i>
		                </div>
		            </li>
				</ul>
				<div class="calender_container">
					<div class='day'>
						<div class="week-day-line">
							<div class="day-name">日</div>
							<div class="day-name">一</div>
							<div class="day-name">二</div>
							<div class="day-name">三</div>
							<div class="day-name">四</div>
							<div class="day-name">五</div>
							<div class="day-name">六</div>
						</div>
						<div class="week-day-line">
							<div class="day-name">日</div>
							<div class="day-name">一</div>
							<div class="day-name">二</div>
							<div class="day-name">三</div>
							<div class="day-name">四</div>
							<div class="day-name">五</div>
							<div class="day-name">六</div>
						</div>
						<div class="week-day-line">
							<div class="day-name">日</div>
							<div class="day-name">一</div>
							<div class="day-name">二</div>
							<div class="day-name">三</div>
							<div class="day-name">四</div>
							<div class="day-name">五</div>
							<div class="day-name">六</div>
						</div>
					</div>
					<div class='date_container'>
						<div class="month_container">
							
						</div>
					</div>
				</div>
			</div>
			<a class="button block radius8 margin8 bg-1" onclick="calendarExpand()">月</a>
			<a class="button block radius8 margin8 bg-2" onclick="calendarCollapse()">周</a>
			<a class="button block radius8 margin8 bg-3" onclick="today()">今天</a>
	</article>
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<script type="text/javascript" src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
	
    
    
    
    
    
	<script>
		
		function back() {
			history.go(-1);
		}
		var tempWeekSelectObject = new DateSelect({
				activeDate: new Date()
			}),
			tempDivId = "calender_select_container";
		var tempCalenderObject = new Calender({
			dateSelectObject: tempWeekSelectObject,
			containerDivId: tempDivId,
			onChange: function(date) {
				console.log(date);
			}
		});
		function calendarCollapse(){
			tempCalenderObject.switchToWeek();
		}
		function calendarExpand(){
			tempCalenderObject.switchToMonth();
		}
		function today(){
			tempCalenderObject.jumpToDate(new Date());
		}
		console.log(tempCalenderObject);
	</script>
</body>
</html>